<script lang="tsx">
import { defineComponent, ref, unref } from 'vue'
import AppSearchModal from './AppSearchModal.vue'
import { ElTooltip } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n';


export default defineComponent({
  name: 'AppSearch',
  setup() {
    const showModal = ref(false)
    const { t } = useI18n();

    function changeModal(show: boolean) {
      showModal.value = show
    }
    return () => {
      return (
        <div onClick={changeModal.bind(null, true)}>
          <ElTooltip effect="customized" placement="bottom">
            {{
              content: () => t('common.searchText'),
              default: () => <span class="anticon" role="img"> <svg-icon icon-class="search" /></span>
              ,
            }}
          </ElTooltip>
          <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
        </div >
      )
    }
  }

})

</script>

<style>
span[role="img"] {
  padding: 0 5px;
}
</style>